<template>
  <div class="content">
    <div class="content-head">
      <el-form :inline="true" :model="formData" size="mini" label-position="left">
        <el-form-item label="标题" label-width="70px" class="form-item">
          <el-input placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-refresh-left" @click="reset_btn">重置</el-button>
          <el-button type="success" size="mini" icon="el-icon-search" @click="search_btn">查询</el-button>
          <el-button type="info" size="mini" icon="el-icon-download" :loading="exportBtnLoading" @click="export_btn">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-table">
      <div class="table-main">
        <el-table :data="tableData" v-loading="tableLoading" style="width: 100%;" :max-height="tableMaxHeight" :show-summary="true" :summary-method="getSummaries" class="content-table-item">
          <el-table-column prop="" label="系列" width=""></el-table-column>
          <el-table-column prop="" label="PIN" width=""></el-table-column>
          <el-table-column prop="" label="品名" width=""></el-table-column>
          <el-table-column prop="" label="分类" width=""></el-table-column>
          <el-table-column prop="" label="工艺" width=""></el-table-column>
          <el-table-column prop="" label="单位" width=""></el-table-column>
          <el-table-column prop="" label="厂内库存" width=""></el-table-column>
          <el-table-column prop="" label="厂内在制" width=""></el-table-column>
          <el-table-column prop="" label="厂商在制" width=""></el-table-column>
          <el-table-column prop="" label="操作" fixed="right" align="center" width="100">
            <template slot-scope="{ row, $index }">
              <el-button type="text" @click="examine_btn(row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="content-footer">
      <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30,50,100]" :page-size="pageSize" background layout="prev, pager, next,total, sizes, jumper" :total="total"></el-pagination>
    </div>
    <!-- dialog -->
    <el-dialog title="查看" :visible.sync="dialogFormVisible" width="40%" @close="dialogFormCancel">
      <el-form :model="dialogFormData" :disabled="true" size="mini" label-width="100px">
        <el-form-item label="部门">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="设备编码">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="产品编码">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="节拍">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="单班工资">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="效率OEE">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="目标产出">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="工时">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="实际产出">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="实际OEE">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="标准用工人力">
          <el-input autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="dialogFormConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqOeeStatementList, reqOeeStatementExcel, reqClassesList, reqUpdateOeeStatement, reqCheckIsTeam, reqUpdateSalary } from "@/api/workOrder.js";
import { portrait, autoOrientation, fullscreen } from "@/utils/rotatingScreen.js";
import TableHeadFilter from "@/components/tableHeadFilter/index.vue";
export default {
  name:"rowMaterailTable",  //原材料表
  components:{
    TableHeadFilter
  },
  data() {
    return {
      formData:{},
      tableData:[],
      currentPage:1,
      pageSize:10,
      total:0,
      tableLoading:false,
      exportBtnLoading:false,
      tableMaxHeight:450,
      dialogFormVisible:false,
      dialogFormData:{}
    }
  },
  mounted(){
    //精致环境下进行自动旋转
    //autoOrientation();
    document.title = "原材料表";
    this.calculateTableMaxHeight();
  },
  methods:{
    //分页获取报工列表信息
    async getOeeStatementList () {
      this.tableLoading = true;
      const { workshop, reportDate, classes, productCode } = this.formData;
      const parameter = { reportDate, workShop:workshop, classes, productCode };
      reqOeeStatementList(parameter).then(res => {
        if(res.data.code === 200){
          this.tableData = res.data.data;
        }
        this.tableLoading = false;
        console.log("分页获取oee报表信息",res);
      }).catch(err => {
        this.$message({type:"error",message:"列表数据获取失败"});
        this.tableLoading = false;
      })
    },
    getIsTeam(){
      reqCheckIsTeam().then(response => {
        if(response.data.code === 200){
          this.isTeam = response.data.data;
        }
        console.log('是否为班组api',response);
      }).catch(error => {
        console.log('是否为班组api',error);
      })
    },
    getClassList(){
      reqClassesList().then(response => {
        if(response.data.code === 200){
          this.formData.classesList = response.data.data.map(item => {
            return item.shiftType;
          });
        }
        console.log('获取班次信息api',response);
      }).catch(error => {
        this.$message({type:"error",message:"班次数据获取失败"});
        console.log('获取班次信息api',error);
      })
    },
    //查询重置导出按钮
    search_btn(){
      const { workshop, reportDate, classes, productCode } = this.formData;
      if(!reportDate){
        this.$message({type:"warning",message:"请先选择报工日期"});
        return;
      }
      this.getOeeStatementList();
    },
    reset_btn(){
      this.formData.workshop = "";
      this.formData.reportDate = this.formatDate(new Date(),1);
      this.formData.classes = "";
      this.formData.productCode = "";
      this.getOeeStatementList();
    },
    export_btn() {
      const { reportDate, workshop, classes, productCode } = this.formData;
      const parameter = {reportDate,workShop:workshop,classes,productCode};
      if(reportDate === null || reportDate === ""){
        this.$message({type:"warning",message:"请选择日期后再进行报表数据下载"});
        return;
      }
      this.$confirm('即将导出当前数据内容(内容将根据相关筛选条件进行过滤', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'})
        .then(async () => {
            this.exportBtnLoading = true;
            let res = await reqOeeStatementExcel(parameter);
            if (res.status === 200) {
                let blob = res.data;
                let url = window.URL.createObjectURL(blob,{type: 'application/zip'});
                const aLink = document.createElement('a');
                aLink.href = url;
                let timestamp = new Date().getTime();
                aLink.setAttribute('download', reportDate + workshop+'生产汇总报表_' + timestamp);
                document.body.appendChild(aLink);
                aLink.click();
                document.body.removeChild(aLink);
                this.$message.success('导出成功');
                this.exportBtnLoading = false;
            } else {
                this.$message.error('导出失败,请重试');
                this.exportBtnLoading = false;
            }
          console.log('oee报表导出api',res);
        }).catch((error) => {
          condole.log("oee报表导出error:",error);
          this.$message({type: 'info', message: '已取消导出!'});
          this.exportBtnLoading = false;          
        });
    },
    examine_btn(row){
      const formData = this.dialogFormData;
      const keyList = [];
      for(let k in formData){
        keyList.push(k);
      }
      keyList.forEach((key,index) => {
        formData[key] = row[key];
      })
      this.dialogFormVisible = true;
    },
    dialogFormCancel(){
      this.dialogFormVisible = false;
      const formData = this.dialogFormData;
      const keyList = [];
      for(let k in formData){
        keyList.push(k);
      }
      keyList.forEach((key,index) => {
        formData[key] = "";
      })
    },
    dialogFormConfirm(){
      const { reportTime,productCode,teamName,classes } = this.dialogFormData;
      const parameter = {reportTime,productModel:productCode,teamName,shift:classes,isConfirmed:true};
      reqUpdateOeeStatement(parameter).then(response => {
        if(response.data.code === 200){
          this.dialogFormCancel();
          this.getOeeStatementList();
          this.$message({type:"success",message:"已确认查看"});
        }
        console.log('更新生产汇总表api',response);
      }).catch(error => {
        this.$message({type:"error",message:"确认出错，请重试"});
        console.log('更新oee生产汇总表api',error);
      })
    },
    //分页器
    handleCurrentChange(curPage){
      this.currentPage = curPage;
      //重新获取数据
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize;
      //重新获取数据
    },
    calculateTableMaxHeight(){
      const dom = document.querySelector(".table-main");
      this.$nextTick(() => {
        this.tableMaxHeight = dom.offsetHeight - 10;
      })
    },
    //格式化时间
    formatDate(val,type){
      let date = new Date(val);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let h = date.getHours();
      let m = date.getMinutes();
      let s = date.getSeconds();
      if(type === 0){
          return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " " + this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
      } else if (type === 1){
          return year + "-" + this.addZero(month) + "-" + this.addZero(day);
      } else if (type === 2){
          return this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
      } else if (type === 3){
          return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " 00:00:00";
      } else if (type === 4){
        return year + "年" + this.addZero(month) + "月" + this.addZero(day) + "日";
      }
    },
    addZero(val){
      return val > 9 ? val : "0" + val;
    },
    //tableHeadFiler的change事件
    filterChangeEvent(parameter){
      const { state, filterField, selectedValue } = parameter;
      if(state === 'clear'){
        //清空操作
        if(this.formData[filterField] !== ""){
          this.formData[filterField] = "";
          this.search_btn();
        }
      }
      if(state === 'confirm'){
        //确定操作
        this.formData[filterField] = selectedValue;
        if(selectedValue !== ""){
          this.search_btn();
        }
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1% 2%;
  box-sizing: border-box;

  .content-head{
    flex: 0.5;
    .form-item{
      margin-right: 2vw;
    }
  }
  .content-table{
    flex: 9;
    margin: 10px 0;
    .table-date{
      width: 100%;
      height: 2%;
      min-height: 15px;
      margin-bottom: 0.5%;
      display: flex;
      justify-content: right;
    }
    .table-main{
      width: 100%;
      height: 98%;
    }
  }
  .content-footer{
    flex: 0.5;
    display: flex;
    justify-content: flex-end;
  }
}
::v-deep .el-table__header th {
padding: 5px 0; /* 调整上下内边距 */
}
</style>